import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";


const scene = new THREE.Scene();

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(200, 200, 200);
scene.add(pointLight);
const axeshelper = new THREE.AxesHelper(200);
scene.add(axeshelper);
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); 
document.body.appendChild(renderer.domElement);

const animate = function () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};
animate();
const controls = new OrbitControls(camera, renderer.domElement);

// 点模型
// const vertices = new Float32Array([
//     50, 0,0,
//     0,80,0,
//     0,0,100,
//     50,50,50
// ]);
// const geometry = new THREE.BufferGeometry();
// geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// const material = new THREE.PointsMaterial({ 
//     color: new THREE.Color(0x00ff00),
//     size: 10,
// });
// const points = new THREE.Points(geometry, material);
// scene.add(points);

const vertices = [];
for ( let i = 0; i < 100; i ++ ) {
	const x = THREE.MathUtils.randFloatSpread( 200 );
	const y = THREE.MathUtils.randFloatSpread( 200 );
	const z = THREE.MathUtils.randFloatSpread( 200 );
	vertices.push( x, y, z );
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

const material = new THREE.PointsMaterial( { 
    color: new THREE.Color(0x00ff00),
    size: 10,
});

const points = new THREE.Points( geometry, material );
scene.add( points );


// 线模型
const geometryLine = new THREE.BufferGeometry();
const verticesLine = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,
    0, 0, 100,
    100, 100, 0
]);
geometryLine.setAttribute('position', new THREE.BufferAttribute(verticesLine, 3));
const materialLine = new THREE.LineBasicMaterial({ 
    color: new THREE.Color('red'),
});
const line = new THREE.Line(geometryLine, materialLine);
// const line = new THREE.LineSegments(geometryLine, materialLine);
// const line = new THREE.LineLoop(geometryLine, materialLine);
scene.add(line);

// 网格模型
const verticesMesh = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,
    100, 100, 0
]);

const attribute = new THREE.BufferAttribute(verticesMesh, 3);
geometry.attributes.position = attribute;

const indexes = new Uint16Array([
    0, 1, 2, 2, 1, 3
]);
geometry.index = new THREE.BufferAttribute(indexes, 1);

const materialMesh = new THREE.MeshBasicMaterial({
    color: new THREE.Color('orange'),
    //从相机看过去的方向，如果一个三角形是逆时针连接的顶点，就是正面，顺时针就是反面。
    //默认是正面朝外
    side: THREE.DoubleSide,
    // 
    // 线框模式
    // wireframe: true,
});

const mesh = new THREE.Mesh(geometry, materialMesh);
scene.add(mesh);